let main = document.querySelector(".main"),//图片区域
    img= document.querySelector(".img_box"),//ul.img_box
    carousel = document.querySelector(".carousel"),//carousel
    sec=document.querySelector(".sec"),// 底部圆点控制器 
    num=1,//计数变量
    lastIndex=1,//上一个操作下标
    timer,//定时器
    flag = true; // 设置开关, 默认可以打开

ajax("post","http://studentback.dfbuff.xyz/postMethod",
    (res)=>{
        // 函数--添加图片  创建<li>标签，向li中插入<img>,然后放入.img_box中
        function fn(index,alt) {
            let newImg = document.createElement("li")
            newImg.innerHTML=`<img src=${res.result[index].content} alt=${alt}>`
            img.appendChild(newImg)
        }
        // 开头添加最后一张图片
        fn(res.result.length-1,res.result.length)
        // 遍历添加图片
        res.result.forEach((val,idx) => {
            fn(idx,idx+1)
            // 添加底部小圆点
            let newSpan = document.createElement("span")
            newSpan.setAttribute("data-index",idx+1)
            newSpan.className="dot"
            sec.appendChild(newSpan)
            sec.firstElementChild.className="dot active"
        })
        // 末尾添加第一张图片
        fn("0","1")
    },
    {
        "type":"图片"
    }
)

// *把原来的第一张图片放到中间显示
img.style.transform = `translateX(-${num}00%)`

// *设置图片滑动
setTimeout(() =>img.style.transition = ".2s ease", 300)

// *事件代理
carousel.addEventListener("click",(e)=>{
    ;(e.target.className == "left")&&lt(e.target)
    ;(e.target.className == "right")&&rt(e.target)
    ;(e.target.classList.contains("dot")) && dotFn(e.target)
})

// *下一张
function rt(target){
    if (flag) {
        flagFn()
        img.style.transform = `translateX(-${++num}00%)`
        //* 判断是否到达最后一张
        limit(img.children.length - 1, 1)

        // *获取具体span标签
        let rBtnEvent = target.parentElement.nextElementSibling.children[num - 1]
        dotColor(rBtnEvent)
    } 
}

// *上一张
function lt(target){
    if (flag) {
        flagFn()
        img.style.transform = `translateX(-${--num}00%)`
        // *判断是否是第一张
        limit(0, img.children.length - 2)

        // *获取具体span标签
        let lBtnEvent = target.parentElement.nextElementSibling.children[num - 1]
        dotColor(lBtnEvent)
    }
}

//* 临界点跳转图片
function limit(limitIndex, setIndex) {
    // *limitIndex 设置限制下标    setIndex 设置对应下标
    if (num == limitIndex) {
        num = setIndex
        img.addEventListener("transitionend", () =>{
            // *清除过渡效果, 并且ul恢复位置
            img.style.transition = "none"
            img.style.transform = `translateX(-${num}00%)`

            // *恢复过渡效果
            // *获取最终样式(被计算的样式)
            window.getComputedStyle(img, "style").getPropertyValue("transition-duration")
            img.style.transition = "0.2s ease"
        })
    }
}

// 底部原点
function dotFn(target) {
    // 获取自定义属性的值，这个值可以和index对应
    let dataIndex = target.getAttribute("data-index")
    console.log(dataIndex)//1 2 3 4
    // 操作的值重新赋值到index，那么index就可以更新
    num = dataIndex
    img.style.transform = `translateX(-${num}00%)`

    // 调用小圆点颜色函数
    dotColor(target)
}

// 小圆点颜色变化函数
function dotColor(tag) {
    tag.parentElement.children[lastIndex - 1].classList.remove("active")
    tag.classList.add("active")
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = num
}

// 自动轮播
timeFn()
function timeFn() {
    (timer)&&clearInterval(timer)
    timer = setInterval( ()=>rt(img), 1000)
}

// 鼠标移入，停止定时器
carousel.addEventListener("mouseover",()=>clearInterval(timer))
// 鼠标移出开始定时器
carousel.addEventListener("mouseleave", ()=>setTimeout(timeFn, 1000))
// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", ()=>document.hidden? clearInterval(timer): timeFn())

// 控制开关
function flagFn() {
    // 关闭开关
    flag = false
    img.addEventListener("transitionend", () =>flag = true)
}